<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<base href="<%=basePath%>" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> ${headerTitle }</title>
	
  	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1";/><!-- IE的渲染模式 -->
    <meta name="keywords" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="description" content="信帧,teleframe,iparking,I停车,爱停车,blackshadowwalker" />
	<meta name="author" content="blackshadowwalker" />
    
	<script src="scripts/jquery/jquery-1.7.min.js"></script>
	<link href="bootstrap/3.2/css/bootstrap.css" rel="stylesheet"/>
	<script src="bootstrap/3.2/js/bootstrap.min.js"></script>

	<script src="scripts/jquery/jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>
	<link href="bootstrap/3/css/datepicker.css" rel="stylesheet"/>
	<script src="bootstrap/3/js/bootstrap-datepicker.js"></script>
	
	<link href="css/common.css" rel="stylesheet"/>
	<script src="index/js/index.js" type="text/javascript"></script>
	
	<style>
		body{
			margin-left: 10px;
			margin-top: 7px;
		}
	</style>

</head>

<body>

<div   >
	
	<div>
		<div class="alert-info" style="">
			<a href="${action }?" class="btn btn-warning">返回</a>
			<div style="display:inline;margin-left:30px;color:#f00;">
				${msg }
			</div>
		</div >
	</div>
	 
	<form id="myform" class="form-horizontal" role="form"  action="${action }?method=${method }" method="post" onunload="location='about:blank'">
		<fieldset>
		  <div class="form-group">
		    <label class="col-sm-2 control-label"><span style="color:#f00">*</span>菜单名称：</label>
		    <div class="col-sm-5">
		      	<input type="text" class="form-control" name="rulerInfo.rulerName" value="${rulerInfo.rulerName }"  placeholder="菜单名称" />
		      	 <span class="errorMessage" >
					<s:property value="errors['rulerInfo.rulerName'][0]" />
				</span>
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label">上级菜单：</label>
		    <div class="col-sm-5">
		    		<select  class="form-control" name="rulerInfo.manager"  disabled>
	    				<option value="0" >......</option>
		    			<s:iterator id="l"  value="list" status="index" >  
		    				<s:if test="level==1 ">
			    				<option value="${rulerid }" >${rulerName }</option>
		    				</s:if>
		    			</s:iterator>
		    		</select>
		    		<script>
		    			$("select[name='rulerInfo.manager']").val( "${rulerInfo.manager}");
		    		</script>
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label"><span style="color:#f00">*</span>Action：</label>
		    <div class="col-sm-5">
				<input type="text" class="form-control" name="rulerInfo.url" value="${rulerInfo.url }"  placeholder="Action" /> 	
				(*Action,eg: PersonAction)	
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label"><span style="color:#f00"></span>描述：</label>
		    <div class="col-sm-5">
				<input type="text" class="form-control" name="rulerInfo.description" value="${rulerInfo.description }"  placeholder="描述" /> 	
		    </div>
		  </div>
		  <div class="form-group">
		    <label class="col-sm-2 control-label"><span style="color:#f00">*</span>菜单级别：</label>
		    <div class="col-sm-5">
				<select class="form-control" name="rulerInfo.level" onchange="LevelChanged(this);" >
					<option value=1 selected>一级菜单</option>
					<option value=2 >二级菜单</option>
				</select>
				<script>
					function LevelChanged(obj){
						$("select[name='rulerInfo.target'] option").removeAttr("selected");
						if($(obj).val()==1){
						 	$("select[name='rulerInfo.target']").find("option[value='_self']").attr("selected","selected");
						 	$("select[name='rulerInfo.manager']").attr("disabled", "disabled");
					 		$("select[name='rulerInfo.manager']").val(0);
						}else if($(obj).val()==2){
							$("select[name='rulerInfo.target']").find("option[value='main']").attr("selected","selected");
						 	$("select[name='rulerInfo.manager']").removeAttr("disabled");
						}
					}
					
				</script>
		    </div>
		  </div>
		  <div class="form-group">
		    <label  class="col-sm-2 control-label"> Target：</label>
		    <div class="col-sm-5">
						<select  class="form-control"   name="rulerInfo.target" >
							<option value="">...</option>
							<option value="mainframe" selected>默认</option>
							<option value="_self" selected >_self</option>
							<option value="_blank" >_blank</option>
						</select>
						(一级菜单选择 _self, 二级菜单选择 main/_blank)
		    </div>
		  </div>
		  <div class="form-group">
		    <label   class="col-sm-2 control-label"><span style="color:#f00">*</span>是否显示：</label>
		    <div class="col-sm-5">
						<select  class=form-control  name="rulerInfo.echo" >
							<option value="1" selected>显示</option>
							<option value="0">不显示</option>
						</select>
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">排序：</label>
		    <div class="col-sm-5">
					<select class=form-control   name="rulerInfo.sortorder" >
						<option value="0" selected>...</option>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						<option value="6">6</option>
						<option value="7">7</option>
						<option value="8">8</option>
						<option value="9">9</option>
						<option value="10">10</option>
						<option value="11">11</option>
						<option value="12">12</option>
					</select>
		    </div>
		  </div>
		  <div class="form-group">
		    <label   class="col-sm-2 control-label"><span style="color:#f00">*</span>图标：</label>
		    <div class="col-sm-5">
				<input  class=form-control  name="rulerInfo.icon"  type="text"  value="${rulerInfo.icon }"/>
		    </div>
		  </div>
		  <div class="form-group">
		    <label   class="col-sm-2 control-label"><span style="color:#f00">*</span>权限：</label>
		    <div class="col-sm-5">
		    	<span id="methodsCheckbox">
		    		<div class="input-group" >
							<div class="input-group-addon hand">
								<i class="glyphicon glyphicon-plus btn hand" onclick="addmethods(this,'','')">添加</i>
							</div>
							<div class="input-group-addon">
								<i class="glyphicon glyphicon-plus btn hand" onclick="addQAUDV(this)">添加QAUDV</i>
							</div>
					</div>
					
			    	<s:iterator value="rulerInfo.methods" id="mds" status="L">
							<div class="input-group" name="rulerInfo.methods">
								<div class="input-group-addon">method</div>
								<input class="form-control" type="text" name="methods[${L.index}].method" value="${method}" placeholder="method" />
								<div class="input-group-addon">名称</div>
								<input class="form-control" type="text" name="methods[${L.index}].name"  value="${name }" placeholder="名称" />
								<div class="input-group-addon">
									<i class="glyphicon glyphicon-remove hand" onclick="removemethods(this)">删除</i>
								</div>
							</div>
					</s:iterator>
				
				</span>
		    </div>
		  </div>
		  
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label"> </label>
		    <div class="col-sm-5">
	    			<input class="btn btn-success btn-lg btn-block"  type=submit value="提交"   />
					<input class="btn btn-primary btn-lg btn-block"  type="reset" value="重置"  />
		     </div>
		  </div>
	 </fieldset>
	</form>
	
</div>

<div>
	<br/>
	<br/>
</div>

		
		<script>
		
			var msg = "${msg }";
			if(msg!="" && msg!="null")
				alert(msg);
		
			$("#myform input[type='submit']").click(function(e){
			    e.preventDefault();//阻止提交按钮的默认 action
			//	if(!$("#myform").validateForm()){
			//		return ;
			//	}
				var btn = $(this);
		  		btn.val("正在提交...");
		  		btn.addClass("disabled");
		// 		$("#myform fieldset").attr("disabled","disabled"); //if user jquery.post
		  		$(btn).parent().children("input[type='reset']").addClass("disabled");
				$("#myform").submit();
			});
		
			//添加增删改查方法
			function addQAUDV(obj){
				var methods = [{"method":"query", "name":"查询"},{"method":"add", "name":"添加"},{"method":"update", "name":"修改"},{"method":"delete", "name":"删除"},{"method":"view", "name":"查看详情"}];
				var methodObj= [{ "query":"查询", "add":"添加", "update":"修改", "delete":"删除", "view":"查看详情" }];
				$.each(methodObj, function(index, m){
					$.each(m, function(key, value){
						//console.log( key+"="+value );
						addmethods(obj, key, value);
					});
				});
			}
			//移除方法
			function removemethods(obj){
				var methodsCheckboxs = $("#methodsCheckbox div[name='rulerInfo.methods']");
				var length = methodsCheckboxs.length;
				$(obj).parent().parent().remove();
				$("#methodsCheckbox div[name='rulerInfo.methods']").each(function(index){
					console.log($(this).children("input[type='text'][name$='method']"));
						$(this).children("input[type='text'][name$='method']").attr("name", "methods["+index+"].method");
						$(this).children("input[type='text'][name$='name']").attr("name", "methods["+index+"].name");
				});
			}
			//添加方法
			function addmethods(obj, method, name){
			
				var methodsCheckboxs = $("#methodsCheckbox div[name='rulerInfo.methods']");
				var index = methodsCheckboxs.length;
				
				// new 
				html = "";
				html += " <div class=\"input-group\" name=\"rulerInfo.methods\" >";
				html += "	<div class=\"input-group-addon\">method</div>";
				html += "	<input class=\"form-control\" type=text  name=\"methods["+index+"].method\" value=\""+method+"\" placeholder=\"method\" />";
				html += "	<div class=\"input-group-addon\">名称</div>";
				html += "	<input class=\"form-control\" type=text name=\"methods["+index+"].name\"  value=\""+name+"\" placeholder=\"名称\" />";
				html += "	<div class=\"input-group-addon\">";
				html += "		<i class=\"glyphicon glyphicon-remove hand\" onclick=\"removemethods(this)\">删除</i>";
				html += "	</div>";
				html += " </div>";
				$(obj).parent().parent().parent().append(html);
				
/*			
				var method = $("#method-method");
				var name = $("#method-name");
				if($.trim(method.val())==""){
					method.focus();
					alert("method不能为空");
					return;
				}
				if($.trim(name.val())==""){
					name.focus();
					alert("method不能为空");
					return;
				}
				var html = "";
				html += "<div classs=input-group>";
				html += "<div class=input-group-addon >@</div>";
				html += 	"<input type=text class=methods name=\"methods["+index+"].method\"  id=\"ListPI_"+index+"\" value=\""+method.val()+"\" />";
				html += 	"<input type=text class=methodsName name=\"methods["+index+"].name\"  id=\"ListPI_"+index+"\" value=\""+name.val()+"\" />";
				html += "</div>";
				$("#methodsCheckbox").append(html);
				method.val("");
				name.val("");
	*/			
			}
		
			$(document).ready(function(){
				
					var level = "${rulerInfo.level}";
					if(level=="2")
						$("select[name='rulerInfo.manager']").removeAttr("disabled");
					$("select[name='rulerInfo.level']").val("${rulerInfo.level}");
					$("select[name='rulerInfo.target']").val("${rulerInfo.target}");
					$("select[name='rulerInfo.echo']").val("${rulerInfo.echo}");
					$("select[name='rulerInfo.sortorder']").val("${rulerInfo.sortorder}");
					
					if( $("input[name='rulerInfo.manager']").val()!="0" ){//说明是二级菜单
						$("select[name='rulerInfo.target']").find("option[value='main']").attr("selected","selected");
					}
					
			});
		
		</script>
		
	</body>
</html>